<template>
  <Card dis-hover :bordered="false">
    <Row class="ivu-mb-8">
      <Col :span="4">
        <Button
          type="primary"
          v-hasC="{
            name: 'v1-net-net-config-edit-project',
            flag: 'v1/net/net-config/edit-project',
          }"
          @click="handdleAdd"
          >配置项目</Button
        >
      </Col>
    </Row>
    <Table :columns="columns" :data="data" :loading="loading" :height="660">
      <template slot-scope="{ row }" slot="category">
        <Input v-model="editInfo.category" v-if="editId == row.channel_id" />
        <span v-else>{{ row.category }}</span>
      </template>
      <template slot-scope="{ row }" slot="dimension">
        <Input v-model="editInfo.dimension" v-if="editId == row.channel_id" />
        <span v-else>{{ row.dimension }}</span>
      </template>
      <template slot-scope="{ row }" :slot="item.slot" v-for="item in clum">
        <div :key="item.title">
          <span v-if="editId == row.channel_id">
            <Select
              style="padding-top: 1px;"
              filterable
              clearable
              v-model="editInfo['project'][item.id].member_id"
            >
              <Option
                :value="el.value"
                v-for="el in editInfo.projectLists[item.id]"
                :key="el.value"
                >{{ el.label }}</Option
              >
            </Select>
          </span>

          <span v-else>{{ row["project"][item.id]["member_name"] }}</span>
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <span v-if="editId == row.channel_id">
          <Button
            type="success"
            :loading="btnLoading"
            size="small"
            v-hasC="{
              name: 'v1-net-net-config-edit-channel',
              flag: 'v1/net/net-config/edit-channel',
            }"
            @click="haddleSave(row, index)"
            >保存</Button
          >
          <Button
            type="default"
            size="small"
            class="ivu-ml-8"
            @click="haddleCancel()"
            >取消</Button
          >
        </span>

        <Button
          type="primary"
          @click="handdleEdit(row)"
          :loading="btnLoading && currentId == row.channel_id"
          v-hasC="{
            name: 'v1-net-net-config-edit-channel',
            flag: 'v1/net/net-config/edit-channel',
          }"
          v-else
          >编辑</Button
        >
      </template>
    </Table>

    <Modal
      v-model="showModal"
      title="项目配置"
      :draggable="true"
      :mask-closable="false"
    >
      <Select
        v-model="params.project_ids"
        filterable
        multiple
        @on-change="changePro"
        :transfer="false"
        placeholder="项目选择"
      >
        <Option
          v-for="item in projectList"
          :value="item.value"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select>
      <div slot="footer">
        <Button @click="canceledit">取消</Button>
        <Button @click="submitedit" :loading="btnLoading" type="primary"
          >确认</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import {
  netConfigList,
  netConfigEditProject,
  netConfigProjectInfo,
  netConfigEditInfo,
  netConfigEditChannel,
} from "@/api/hqapi";
export default {
  data() {
    return {
      loading: false,
      btnLoading: false,
      showModal: false,
      editId: "",
      projectList: [],
      params: { project_ids: [] },
      columns: [],
      clum1: [
        { title: "渠道ID", key: "channel_id", width: 100, fixed: "left" },
        {
          title: "一级渠道",
          key: "channel_name",
          width: 120,
          fixed: "left",
        },
        {
          title: "二级渠道",
          key: "child_channel_name",
          width: 120,
          fixed: "left",
        },
      ],
      clum: [],
      clum2: [
        { title: "类别", slot: "category", minWidth: 150 },
        { title: "维度", slot: "dimension", minWidth: 150 },
        {
          title: "操作",
          slot: "action",
          width: 165,
          align: "center",
          fixed: "right",
        },
      ],
      data: [],
      editInfo: {
        category: "",
        channel_id: "",
        channel_name: "",
        child_channel_name: "",
        dimension: "",
        project: [],
        projectLists: "",
      },
      currentId: "",
      oldProjectId: [],
    };
  },
  methods: {
    initial() {
      this.data = [];
      this.columns = [...this.clum1, ...this.clum, ...this.clum2];
      this.btnLoading = false;
      this.initData();
      this.askData();
    },
    askData() {
      this.loading = true;
      netConfigList()
        .then((res) => {
          this.clum = [];
          res.condition.project.forEach((item) => {
            this.clum.push({
              title: item.name,
              slot: "pro" + item.id,
              id: item.id,
              minWidth: 150,
            });
          });
          this.columns = [...this.clum1, ...this.clum, ...this.clum2];
          this.data = res.list;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handdleAdd() {
      this.showModal = true;
      this.params.project_ids = [];
      this.oldProjectId = [];
      netConfigProjectInfo().then((res) => {
        this.projectList = res.condition.project;
        this.params.project_ids = res.project_ids;
        this.oldProjectId = JSON.parse(JSON.stringify(res.project_ids));
      });
    },
    initData() {
      this.editId = "";
      this.currentId = "";
      this.editInfo = {
        category: "",
        channel_id: "",
        channel_name: "",
        child_channel_name: "",
        dimension: "",
        project: [],
        projectLists: "",
      };
    },
    changePro(e) {
      let difIndex = "";
      difIndex = this.oldProjectId.findIndex((item) => {
        return !e.includes(item);
      });
      let difId = this.oldProjectId[difIndex];

      if (difIndex > -1) {
        this.$Modal.confirm({
          title: "温馨提示",
          content: "确定移除此项目？移除后此项目下的配置数据将清空",
          onOk: () => {
            this.oldProjectId.splice(difIndex, 1);
          },
          onCancel: () => {
            this.params.project_ids.splice(difIndex, 0, difId);
          },
        });
      }
    },
    handdleEdit(row) {
      this.initData();
      this.btnLoading = true;
      this.currentId = row.channel_id;
      netConfigEditInfo({ channel_id: row.channel_id }).then((res) => {
        let projectLists = [];
        this.clum.forEach((item) => {
          projectLists[item.id] = res.condition.member.filter((el) => {
            return el.project_ids.includes(item.id);
          });
        });
        this.editInfo = {
          category: res.category,
          channel_id: res.channel_id,
          channel_name: res.channel_name,
          child_channel_name: res.child_channel_name,
          dimension: res.dimension,
          project: res.project,
          projectLists: projectLists,
        };
        this.editId = row.channel_id;
        this.btnLoading = false;
        this.currentId = "";
      });
    },
    haddleSave(row, index) {
      this.btnLoading = true;
      let projects = [];
      for (let item in this.editInfo.project) {
        projects.push({
          member_id: this.editInfo.project[item].member_id,
          project_id: this.editInfo.project[item].project_id,
        });
      }
      const params = {
        channel_id: this.editInfo.channel_id,
        project: projects,
        category: this.editInfo.category,
        dimension: this.editInfo.dimension,
      };
      netConfigEditChannel(params)
        .then((res) => {
          this.editId = "";
          this.btnLoading = false;
          // this.askData();
          res.channel_id = this.editInfo.channel_id;
          res.channel_name = this.editInfo.channel_name;
          res.child_channel_name = this.editInfo.child_channel_name;
          this.data.splice(index, 1, res);
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
    haddleCancel() {
      this.initData();
    },
    canceledit() {
      this.showModal = false;
    },
    submitedit() {
      this.btnLoading = true;
      netConfigEditProject(this.params)
        .then((res) => {
          this.btnLoading = false;
          this.showModal = false;
          this.askData();
        })
        .catch(() => {
          this.btnLoading = false;
          this.showModal = false;
        });
    },
  },
};
</script>
